<template>
  <div>
    <el-tabs v-model="searchForm.status" @tab-change="getData">
      <el-tab-pane
        :label="item.name"
        :name="item.status"
        v-for="(item, index) in tabbars"
        :key="index"
      ></el-tab-pane>
    </el-tabs>
  </div>
  <el-card shadow="never">
    <!-- 搜索 -->
    <el-form :model="searchForm" class="mb-3" size="small">
      <el-row>
        <el-col :span="6">
          <el-form-item label="關鍵詞">
            <el-input
              v-model="searchForm.keyword"
              placeholder="訂單號"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button type="primary" @click="getData">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 新增刷新 -->
    <ListHeader
      layout="refresh,download"
      @refresh="getData"
      @download="handleExportExcel"
    ></ListHeader>

    <!-- 表格 -->

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="order_no" label="訂單號" />
      <el-table-column prop="created_at" label="下單時間" />
      <el-table-column prop="order_type" label="訂單類型">
        <template #default="{ row }">
          <el-tag :type="row.order_type == 1 ? 'info' : 'warning'">{{
            row.order_type == 1 ? "即時訂單" : "預約訂單"
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="make_time" label="預約時間" /> -->
      <el-table-column prop="pay_mode" label="支付方式">
        <template #default="{ row }">
          <el-tag
            :type="
              row.pay_mode == 1 ? '' : row.pay_mode == 2 ? 'info' : 'warning'
            "
            >{{
              row.pay_mode == 1 ? "PayPal" : row.pay_mode == 2 ? "錢包" : "線下"
            }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="支付狀態">
        <template #default="{ row }">
          <el-tag :type="row.status == 10 ? 'danger' : 'success'">{{
            row.status == 10 ? "待支付" : "已支付"
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="delivery_type" label="送貨方式">
        <template #default="{ row }">
          <el-tag :type="row.delivery_type == 1 ? 'info' : 'warning'">{{
            row.delivery_type == 1 ? "自取" : "送貨服務"
          }}</el-tag>
        </template>
      </el-table-column> -->

      <el-table-column prop="delivery_type" label="預約時間">
        <template #default="{ row }">
          <el-tag>{{ row.date + "/" + row.time }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="pay_price" label="付款價格" />
      <el-table-column label="操作" width="350px">
        <template #default="{ row }">
          <el-button size="small" text type="primary" @click="handleShow(row)"
            >訂單詳情</el-button
          >
          <el-button
            v-if="row.status != 50"
            size="small"
            text
            type="primary"
            @click="handleMake(row)"
            >確認收貨</el-button
          >
          <!-- <el-button size="small" text type="primary" @click="handleEdit(row)"
            >修改</el-button
          > -->
          <el-button size="small" text type="primary" @click="handleEdit(row)"
            >生成發票</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="flex justify-center mt-4"
      @current-change="getData"
      :current-page="curpage"
      :page-size="limit"
    />

    <!-- 导出 -->
    <ExportExcel :tabs="tabbars" ref="exportexcelref"></ExportExcel>
    <!-- 訂單詳情 -->
    <InfoModal ref="InfoModalRef" :info="info"></InfoModal>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { toast } from "~/composables/util";
import { getReservation } from "~/api/reservation.js";
import { getOrder, getinvoice, updateOrder } from "~/api/order.js";
import FormDrawer from "~/components/FormDrawer.vue";
import ListHeader from "~/components/ListHeader.vue";

import { useInitTable, useInitForm } from "~/composables/useCommon.js";
import ExportExcel from "./ExportExcel.vue";
import InfoModal from "./InfoModal.vue";
const role = ref(null);

const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  curpage,
  total,
  limit,
  getData,
  handleDelete,
} = useInitTable({
  searchForm: {
    status: 1,
  },
  getList: getOrder,

  //   onGetListSuccess: (res) => {

  //     (total.value = res.data.total), (tableData.value = res.data.data);
  //   },
});

//tab
const tabbars = [
  {
    status: "1",
    name: "全部",
  },
  {
    status: "10",
    name: "待支付",
  },
  {
    status: "20",
    name: "待发货",
  },
  {
    status: "30",
    name: "待收货",
  },
  {
    status: "40",
    name: "已收货",
  },
  {
    status: "50",
    name: "已完成",
  },
  {
    status: "2",
    name: "預約訂單",
  },
];

const exportexcelref = ref(null);
const handleExportExcel = () => {
  exportexcelref.value.open();
};

//訂單詳情
const InfoModalRef = ref(null);
const info = ref(null);
const handleShow = (row) => {
  info.value = row;

  InfoModalRef.value.open();
};

const handleEdit = (row) => {
  getinvoice(row.id).then((res) => {
    window.open(`https://testapi.bscd8.com/storage/pdf/${res}`, "_blank");
  });
};

const handleMake = (row) => {
  updateOrder(row.id, row).then((res) => {
    toast("確認成功");
    getData();
  });
};
</script>
